<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
</head>
<body>
    <div>
    <form>
    	<p>输入想要呈现的信息：<input type="text" autocomplete="off" name="message" id="message" size="32" onblur="validateLength(1,32,this,message_help);"><span id="message_help" class="help"></span></p>
    	<p>输入邮政编码：<input type="text" autocomplete="off" name="zipcode" id="zipcode" size="6" onblur="validateZIPCode(this,zipcode_help)"><span id="zipcode_help" class="help"></span></p>
    	<p>输入想要呈现信息的日期：<input type="text" autocomplete="off" name="Flydata" id="flydata" onblur="validateDate(this,flydata_help)"><span id="flydata_help" class="help"></span></p>
    	<p>输入姓名：<input type="text" autocomplete="off" name="name" id="name" onblur="validateNonEmpty(this,name_help)"><span id="name_help" class="help"></span></p>
    	<p>输入电话号码：<input type="text" autocomplete="off" name="PhoneNumber" id="phonenum" size="12" onblur="validatePhone(this,phone_help);"/><span id="phone_help" class="help"></span></p>
    	<p>输入邮箱：<input type="text" autocomplete="off" name="Email" id="email" onblur="validateEmail(this,email_help)"><span id="email_help" class="help"></span></p>
    	<input type="button" name="" value="Order Banner" id="btn" onclick="placeOrder(this.form);">
    	</form>
    </div>
</body>
<script type="text/javascript">
     // 获取id为phone_help的span元素
     var phone_help = document.getElementById("phone_help");
     //获取id为mesage_help的span元素
     var message_help = document.getElementById("message_help");
      //获取id为zipcode_help的span元素
     var zipcode_help = document.getElementById("zipcode_help");
     var name_help = document.getElementById("name_help");
     var email_help = document.getElementById("email_help");
     var flydata_help = document.getElementById("flydata_help");
     // 获取button按钮
     var btn = document.getElementById("btn");
	//检查表单域是否空白
	function validateNonEmpty(inputField,helpText) {
		// See if the input value contains any text 输入值是否包含文本
		if(inputField.value.length == 0) {
			// The data is invalid,so notify the user 数据是无效的，所以通知用户（请输入一个值）
			if(helpText != null)
				helpText.innerHTML = "Please enter a value.";
			return false;
		}else{
			if(helpText != null)
				helpText.innerHTML = "";
			return true;
		}
		
	}
	// 检查并确认表单数据值是否遵守特定的长度。验证横幅信息。
	function validateLength(minLength,maxLength,inputField,helpText) {
		
		// 判断表单域值的最小与最大长度
		// 看看输入值至少包含最小长度,但没有超过最大长度字符
		if(inputField.value.length<minLength || inputField.value.length>maxLength){
			// 数据是无效的，所以设置帮助信息
			if(inputField.value != null)
				helpText.innerHTML = "Please enter a value "+minLength+"to"+maxLength+"characters in length（请输入一个再最小长度和最大长度之间的字符）";
			return false;
		}else{
			// 数据是有效的，所以清楚帮助信息。
			if(helpText != null)
				helpText.innerHTML = "";
			return true;
		}
	}
	// 验证邮政编码
    function validateZIPCode(inputField,helpText) {
    	// 先判断inputField.value.length的长度是不是5
    	if(inputField.value.length != 6){
    		// 这个数据无效，设置帮助信息
    		if(helpText != null) 
    			helpText.innerHTML = "请输入6位数";
    			return false;
    		}
    		else if(isNaN(inputField.value)) {
    			if(helpText != null) 
    			helpText.innerHTML = "请输入五位数";
    			return false;
    		}
    		else{
    			if(helpText != null) 
    			helpText.innerHTML = "";
    			return true;
    	}
    }
    // 验证正则表达式函数
    function validateRegEx(regex,inputStr,helpText,helpMessage) {
    	// inputStr数据是否验证好了
    	if( !regex.test(inputStr)){
    		// 这个数据无效，设置帮助信息并返回false
    		if(helpText != null)
    			helpText.innerHTML = helpMessage;
    		return false;
    	}else{
    		// 这个日期有效，清楚帮助信息并返回true
    		if(helpText != null)
    			helpText.innerHTML = "";
    		return true;
    	}
    }
    // 验证日期
    function validateDate(inputField,helpText) {
    	// 第一个输入值是否包含数据
    	if( !validateNonEmpty(inputField,helpText))
    		return false;
    	// 
    	return validateRegEx(/^\d{2}\/\d{2}\/(\d{2} | \d{4})$/,inputField.value,helpText,"Please enter a data (for example,01/14/1975).")
    }
    // 验证电话号码
    function validatePhone(inputField,helpText) {
    	// 第一个输入值是否包含数据
    	if( !validateNonEmpty(inputField,helpText))
    		return false;
    	// 
    	return validateRegEx(/^\d{3}-\d{3}-\d{4}$/,inputField.value,helpText,"Please enter a phone number (for example,123-456-7890).")
    }
    // 验证邮箱
    function validateEmail(inputField,helpText) {
    	// 第一个输入值是否包含数据
    	if( !validateNonEmpty(inputField,helpText))
    		return false;
    	// 
    	return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/,inputField.value,helpText,"Please enter a address (for example,xt_lee@126.com).")
    }
    // btn按钮提交前验证
    function placeOrder(form) {
    	if(validateLength(1,32,form["message"],form["message_help"]) && validateZIPCode(form["zipcode"],form["zipcode_help"]) && validateNonEmpty(form["flydata"],form["flydata_help"]) && validateNonEmpty(form["name"],form["name_help"]) && validateNonEmpty(form["phonenum"],form[phone_help]) && validateNonEmpty(form["email"],form["email_help"])) {
    		// 用submit方法提交表单到服务器
    		form.submit();
    	}else{
    		alert("很抱歉，订单信息有问题");
    	}
    }
</script>
</html>